<template>
  <div :visible="visible" ref="tipsBox" @update:visible="updateDialog" class="tipsBox">
    <div ref="showPopover" class="tipsClass animated">
      <div>{{tipsContent}}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    visible: Boolean,
    tipsContent: String
  },
  methods: {
    get() {
      if (this.visible) {
        this.$refs.tipsBox.children[0].className = "tipsClass";
        this.updateDialog(false);
      } else {
        this.$refs.tipsBox.children[0].className = "tipsClass animated";
      }
    },
    updateDialog(val) {
      this.$emit("update:visible", val);
    }
  },
  mounted() {
    this.timer = setInterval(this.get, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>
<style lang="scss" scoped>
.tipsClass {
  top: 10%;
  left: 50%;
  height: 40px;
  line-height: 40px;
  position: absolute;
  padding: 0 20px;
  background: #ffffff;
  font-size: 16px;
  margin: 0px auto;
  text-align: center;
  color: #008800;
  opacity: 1;
  transform: translate(-50%, -50%);
  border-radius: 3px;
}
.animated {
  opacity: 0;
  padding: 0;
  filter: Alpha(opacity=0);
  transition: all 2s;
}
</style>
